<template>
  <div id="business_index">
    <div class="title">
      <span class="left">业务类型</span>
      <el-button class="add" type="primary" size="small" icon="el-icon-plus" @click="goLink('/business/businessadd')">
        添加
      </el-button>
    </div>
		<el-table
			type="index"
			:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize) || ''"
			style="width: 100%;padding: 32px;"
			:default-sort="{prop: 'creatTime',order:'descending'}"
			@sort-change='sortChange'
		>
			<el-table-column
				prop="number"
				label="序号"
				align="center"
				width="180">
			 <template slot-scope="scope">
				 <span>{{scope.$index+(currentPage - 1) * pageSize + 1}} </span>
				</template>
			</el-table-column>
			<el-table-column
				prop="businessName"
				width=""
				align="center"
				label="业务类型"
			>
				<template slot-scope="scope">
					<span 
						style="color: #328EF9;text-decoration:none;cursor: pointer"
						@click="goLink('/business/businesssee',scope.row.id)"
					>{{scope.row.businessName}}</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="creatTime"
				label="更新时间"
				sortable="custom"
				align="center"
				width="">
			</el-table-column>
			<el-table-column
				prop="businessDescription"
				label="操作"
				align="center"
			>
				<template slot-scope="scope">
					<img @click="goLink('/business/businesssee',scope.row.id)" class="imgGroup" src="../assets/img/yewu_02.png">
					<img @click="goLink('/business/businessedit',scope.row.id)" class="imgGroup" src="../assets/img/yewu_01.png">
					<img @click="handleDelete(scope.row.id)" class="imgGroup" src="../assets/img/yewu_03.png">
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination
				background
				@size-change="handleSizeChange" 
				@current-change="handleCurrentChange" 
				:current-page.sync="currentPage"
				:page-size="pageSize" 
				:page-sizes="[1, 2, 3, 4]" 
				layout="prev, pager, next" 
				:total="tableData.length">
			</el-pagination>
		</div>
  </div>
</template>
<script>
	import {allBusiness,deleteBusiness} from '../api/getData.js'
  export default {
    name: 'business_index',
		inject:['reload'],
    data: function () {
      return {
        centerDialogVisible: false,
        dataindex:0,
        tableData: [],
				pageSize:10,
				currentPage:1
      }
    },
    created: function () {}, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted() {
			// this.getAllList('true')
		}, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
		beforeRouteEnter(to, from, next){
				next(vm=>{
						console.log(vm)
						// 每次进入路由执行
						vm.getAllList('true')
				})
		},
    methods: {
			sortChange: function(column, prop, order) {
					if(column.order === 'descending'){
						this.getAllList('true')
					}else if(column.order === 'ascending'){
						this.getAllList('false')
					}else{
            this.getAllList('true')
					}
			},
      goLink (url,id) {
        this.$router.push({
					path:url,
					query:{
						id:id
					}
				}
				)
      },
      handleDelete (id) {
				this.$confirm('请再次确认是否删除?','提示',{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(()=>{
					deleteBusiness({
						id:id
					}).then((res) =>{
						console.log(res.data,"删除业务类型")
						if(res.data.code == 0){
							this.$message({
								message:res.data.msg,
								type:'success'
							})
              this.getAllList('true')
              console.log(this.tableData,'再次请求')
						}else{
							this.$message.error(res.data.msg)
						}
					}).catch((error) =>{
						console.log(error)
					})
				}).catch(()=>{
					this.$message({
						type: 'info',
						message: '已取消删除' 
					});  
				})
        
      },
			// 获取全部业务类型
			getAllList(order){
				allBusiness({
					order:order
				}).then((res) =>{
					console.log(res.data,"获取网点全部业务类型")
					if(res.data.code === 0){
						if(res.data.data.fool == false){
							this.$router.push({path:'/business/businessechoose'})
						}else{
							this.tableData = res.data.data.bussilists
						}
					}else{
						this.tableData = []
					}
				}).catch((error) =>{
					console.log(error)
				})
			},
			handleSizeChange(val){
				this.pageSize = val;
			},
			handleCurrentChange(val) {
				this.currentPage = val
			}
    } // 函数
  }
</script>
<style lang='scss'>
  #business_index {
    .title {
      width: 100%;
      height: 56px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      margin-bottom: 24px;
      padding: 0 20px;
      .left {
        font-size: 16px;
        color: #333437;
        font-weight: bold;
      }
      .add {
        color: #fff;

      }
    }
    .el-table thead tr th {
      background-color: #fafafa;
			color: #333;
    }
    .el-table::before {
      height: 0;
    }
    .imgGroup {
      cursor: pointer;
      margin: 0 10px;
    }
    .pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px 0;
      background-color: #fff;
      .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
        background-color: #fff;
        border: 1px solid #ccc;
      }
      .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #409EFF;
      }
    }

  }
</style>
